<template>
	<div class="order container">
		<header>
			<i class="iconfont icon-back" @click="$router.back()"></i>
			<slot>
				<span>提交订单</span>
			</slot>
			<i class="iconfont icon-shouye1"></i>
		</header>
		<section>
			<div class="path">
				<h3 class="path-title">收货信息:</h3>
				<div class="path-content" @click="goPath">
					<div>
						<span>{{path.name}}</span>
						<span>{{path.phone}}</span>
					</div>
					<div>
						<span>{{path.path}}</span>
						<span>{{path.detailpath}}</span>
					</div>
				</div>
			</div>
			<div class="payment">
				<div class="payment-title">支付方式：{{radioPayment}}</div>
				<div>
				    <el-radio-group v-model="radioPayment">
				      <el-radio-button label="微信支付" ></el-radio-button>
				      <el-radio-button label="支付宝支付"></el-radio-button>
				    </el-radio-group>
				</div>
			</div>
			<div class="goods">
				<ul>
					<li
					 v-for="(item,index) in goodsList"
					 :key="index">
						<div>
							<img :src="item.goods_imgUrl" alt="">
						</div>
						<div class="goods-content">
							<h4>{{item.goods_name}}</h4>
							<div class="goods-total">
								<span>￥{{item.goods_price}}</span>
								<span>×{{item.goods_num}}</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</section>
		<footer>
			<div class="order-total">
				<span>共</span>
				<b>{{total.num}}</b>
				<span>件</span>
				<span>总金额：</span>
				<em>￥{{total.price}}</em>
			</div>
			<div class="topay" @click="goPayment">提交订单</div>
		</footer>
	</div>
</template>

<script>
	import http from '@/common/api/request.js'
	import { Toast } from 'mint-ui'
	import {mapState,mapGetters,mapMutations} from 'vuex'
	import bus from '@/common/bus.js'
	import qs from 'qs'
	export default{
		data(){
			return{
				radioPayment:'微信支付',
				path:{},
				item:[] ,//数组
				total:{
					price:0,
					num:0
				}
			}
		},
		computed:{
			// ...mapState({
			// 	list:state=>state.cart.list
			// }),
			...mapState({
				order_id:state=>state.order.order_id,
				selectList:state=>state.cart.selectList
			}),
			...mapGetters(['defaultPath']),
			
			 // goodsList(){
				// return this.item.map(value=>{
				// 	return this.list.find(v=>v.id == value);
			 //        })
			 // }
		},
		created(){
			this.goodsList = JSON.parse( this.$route.query.goodsList ) ;
			this.selectAddress();
			
		},
		activated() { //用keep-alive管理传值
			bus.$on('selectPath',function(data){
				this.path = JSON.parse(data);
			}.bind(this));
			//选中的商品id
			this.item = JSON.parse( this.$route.query.detail );
			this.goodsList = JSON.parse( this.$route.query.goodsList ) ;
			this.selectOrder();
		},
		methods:{
			...mapMutations(['INIT_DATA','initOrder']),
			//查询地址封装
			selectAddress(){
				//查询到地址了
				http.$axios({
					url:'/api/selectAddress',
					method:'POST',
					headers:{
						token:true
					}
				}).then(res=>{
					this.INIT_DATA(res.data);
					//有默认收货地址
					if(this.defaultPath.length){
						this.path = this.defaultPath[0]
					}else{
						this.path = res.data[0]
					}
				})
			},
			//查询订单封装
			selectOrder(){ //封装
				//查询订单
				http.$axios({
					url:'/api/selectOrder',
					method:'POST',
					headers:{
						token:true
					},
					data:{
						order_id:this.order_id
					}
				}).then(res=>{
					this.initOrder(res.data);
					this.total = {
						price:res.data[0].goods_price,
						num:res.data[0].goods_num
					}
				})
			},
			//选择收货地址(点击选择，然后返回上一页，要知道是从哪进来的，并且传过来值)
			goPath(){
				this.$router.push({
					path:'/path',
					query:{
						type:'select'
					}
				});
			},
			//提交订单
			goPayment(){
				//判断是否选择了收货地址
				if( !this.path ) return Toast('请选择地址');
				
				//发送请求=》1、修改订单状态；2、删除购物车的数据
				http.$axios({
					url:'/api/submitOrder',
					method:'POST',
					headers:{
						token:true
					},
					data:{
						order_id:this.order_id,
						shopArr:this.selectList
					}
				}).then(res=>{
					
					let newArr = [];
					this.goodsList.forEach(v=>{
						newArr.push( v.goods_name );
					})
					
					//支付传递的参数
					let dataOrder = {
						order_id:this.order_id,
						name:newArr.join(''),
						price:this.total.price
					}
					if( res.success ){
						//去支付
						http.$axios({
							url:'/api/payment',
							method:'POST',
							headers:{
								token:true,
								'Content-Type':'application/x-www-form-urlencoded'
							},
							//qs是增加安全性的序列化
							data:qs.stringify(dataOrder)
						}).then(res=>{
							if( res.success ){
								//打开支付宝的支付页面
								window.location.href = res.paymentUrl;
							}
							console.log(res);
						})
					}
				})
				
			}
		}
	}
</script>

<style scoped>
	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 1.173333rem;
		color: #fff;
		background-color: #b0352f;
	}
	header i{
		padding: 0 0.4rem;
		font-size: 0.586667rem;
	}
	header span{
		font-weight: 300;
		font-size: 0.48rem;
	}
	section{
		background-color: #f7f7f7;
	}
	section .path-title{
		padding: 0.4rem;
		font-size: 0.426667rem;
	}
	section .path-content{
		padding: 0.16rem 0.4rem;
		font-size: 0.373333rem;
		background-color: #fff;
	}
	section .path-content span{
		padding-right: 0.16rem;
	}
	::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
		width: 4rem;
		background-color: #b0352f;
		border-color:#b0352f;
		box-shadow: 0;
	}
	::v-deep .el-radio-button:first-child .el-radio-button__inner{
		width: 4rem;
		box-shadow: 0;
	}
	::v-deep .el-radio-button:last-child .el-radio-button__inner{
		width: 4rem;
		box-shadow: 0;
	}
	section .payment{
		margin-top: 0.16rem;
		padding: 0.16rem 0.266667rem;
		font-size: 0.426667rem;
		background-color: #fff;
	}
	section .payment .payment-title{
		padding-bottom: 0.266667rem;
	}
	section .goods{
		margin-top: 0.16rem;
		padding: 0.16rem 0.266667rem;
		font-size: 0.426667rem;
		background-color: #fff;
	}
	section .goods ul{
		width: 100%;
	}
	section .goods ul li{
		display: flex;
	}
	section .goods ul li img{
		width: 1.973333rem;
		height: 1.973333rem;
	}
	section .goods-content{
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		padding: 0.4rem;
	}
	section .goods-total{
		display: flex;
		justify-content: space-between;
	}
	footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 1.2rem;
		border-top: 1px solid #ccc;
	}
	footer .order-total{
		font-size: 0.426667rem;
	}
	footer .order-total span{
		padding: 0 0.16rem;
	}
	footer .order-total b,em{
		color: #b0352f;
	}
	footer .order-total em{
		font-size: 0.48rem;
		color: #b0352f;
	}
	footer .topay{
		width: 3.2rem;
		line-height: 1.2rem;
		color: #fff;
		font-size: 0.426667rem;
		text-align: center;
		background-color: #b0352f;
	}
</style>